<template>
    <div class="person">
      姓：<input type="text" v-model="firstName"><br>
      名：<input type="text" v-model="lastName"><br>
      全名：<span>{{fullName}}</span> <br>
      <button @click="changeFullName">修改全名</button>
    </div>
</template>

<script lang="ts" setup name="Person">
  import { ref,computed } from 'vue';
  let firstName = ref('张')
  let lastName = ref('三')

  //这么定义的fullName是一个计算属性，且是只读的
  /* let fullName = computed(()=>{
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  }) */

  // 这么定义的fullName是一个计算属性，可读可写
  let fullName = computed({
    get() {
      return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value 
    },
    set(val) {
      const [str1, str2] = val.split('-')
      //console.log('set', x)
      firstName.value = str1
      lastName.value = str2
    }
  })
  function changeFullName() {
    //console.log(fullName)
    fullName.value = 'li-si'
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  li {
    font-size: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>